<template>
    <div>
            <span v-if="url"  @click="openFile()"><slot name="preview"   :url="url"></slot></span>
            <span v-else @click="openFile()"><slot name="upload"  ></slot></span>
        <cl-upload-space ref="upload" :showButton="showButton" :limit='limit' v-model="url"> </cl-upload-space>
    </div>
</template>

<script type="text/javascript">
export default {
    props: {
        modelValue: {
            type: [String, Number, Boolean, Object, Array],
            default: ''
        },
        limit:{
            type:Number,
            default:9,
        },
        showButton:{
            type:Boolean,
            default:false,
        }
    },
    data() {
        return {

        };
    },
    computed: {
        url: {
            get() {
                return this.modelValue
            },
            set(value) {
                console.log('value',value);
                this.$emit('update:modelValue', value);
            }
        }
    },
    methods: {
        openFile(){
            this.$refs.upload.open()
        }
    }

}
</script>
